<html><head>
	<title>Responsive Navigation Demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="style.css">
	<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" type="text/css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
		$(function() {
			var pull 		= $('#pull');
				menu 		= $('nav ul');
				menuHeight	= menu.height();

			$(pull).on('click', function(e) {
				e.preventDefault();
				menu.slideToggle();
			});

			$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 320 && menu.is(':hidden')) {
        			menu.removeAttr('style');
        		}
    		});
		});
	</script>
</head>
<body>
	<div class="header">
		<div class="header-left">
			<a href="#" id="menu">Menu</a>
			<ul class="clearfix">
				<li><a href="#">Home</a></li>
				<li><a href="#">How-to</a></li>
				<li><a href="#">Icons</a></li>
				<li><a href="#">Design</a></li>
				<li><a href="#">Web 2.0</a></li>
				<li><a href="#">Tools</a></li>
				<li><a href="#">Tools</a></li>
			</ul>
		</div>
		<div class="header-right">
            <form method="post" name="signin" action="/accounts/signin">
                <label class="login_input login">
                    <input type="text" name="username" value="Nom d'utilisateur" id="username" class="input_text">
                </label>
                <label class="login_input login">
                    <input type="password" name="password" value="******" id="password" class="input_text">
                </label>
                <label class="login_check login">
                    <input type="checkbox" name="remember" id="remember" checked="checked">
                </label>
                <label class="login_label login">
                    <label for="remember" class="login">Remember</label>
                </label>
                <label class="login_button">
                    <a id="sign_in" href="/accounts/signin" title="SIGN IN">SIGN IN</a>
                </label>
                <label class="login_button">
                    <a id="sign_up" href="/accounts/signup" title="SIGN UP">SIGN UP</a>
                </label>
                
            </form>
		</div>
		<!--a href="#" id="pull">Menu</a-->
	</div>
	
</body>
<script>
	$(document).ready(function(){
	  $('#menu').click(function(){
			$('ul.clearfix').slideToggle();
	  });
	});
</script>
</html>